import { html } from "htm/preact";

import { ClearIcon, SaveIcon, LoadIcon } from "../components/icon.component.js";
import Button from "../components/Button.component.js";
import TabSelector from "./tabSelector.layout.js";

import { useAppContext } from "../stores/app.store.js";

export default function Header() {
  const context = useAppContext();
  const tabs = {
    list: ["Phonology", "Glossary", "Grammar"],
    disabled: ["Glossary", "Grammar"],
  };

  const onChangeTab = (tab) => {
    if (context.tab !== tab) {
      context.setTab(tab);
    }
  };

  return html`<header class="header">
    <span class="logo">Conlang Generator</span>
    <${TabSelector}
      tabs=${tabs.list}
      disabled=${tabs.disabled}
      onChangeTab=${onChangeTab}
      selected=${context.tab}
    />
    <div class="controls">
      <${Button} icon><${LoadIcon} size=${32} /><//>
      <${Button} icon disabled><${SaveIcon} size=${32} /><//>
      <${Button} icon><${ClearIcon} size=${32} /><//>
    </div>
  </header>`;
}
